<template>
  <div class="main">
    <govheader :title="title"></govheader>
    <govnavigation></govnavigation>
    <!-- <iframe src="http://10.30.22.80:8080" frameborder="0"></iframe> -->
    <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        style="height: 790px; width: 100%;position: absolute"
        @click="getClickInfo"
        :scroll-wheel-zoom="true"
        >
        <bm-map-type
            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        ></bm-map-type>
    </baidu-map>
      <div style="width: 30%;position: absolute;left:15px; z-index: 100;margin-top: 10px" class="content-left">
        <div class="left_baidu">
          <div
            v-if="parkCode === 'ZJYQ-330182-01'"
            class="goback"
            style="top: 45px;left:880px"
            @click="gozhihui()"
          >
            智慧园区管理平台
          </div>
          <div class="goback" @click="goback()" style="top: 10px;left:880px">
            园&nbsp;区&nbsp;总&nbsp;览
          </div>
          <div class="intrdouce">
            <div
              class="legend-body"
              @click="searchPark('企业@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/企业@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '企业@2x' ? 'selectButton' : ''">
                企业
              </div>
            </div>
            <div
              class="legend-body"
              @click="searchPark('监控@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/监控@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '监控@2x' ? 'selectButton' : ''">
                监控
              </div>
            </div>
            <div
              class="legend-body"
              @click="searchPark('鹰眼@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/鹰眼@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '鹰眼@2x' ? 'selectButton' : ''">
                鹰眼
              </div>
            </div>
            <div
              class="legend-body"
              @click="searchPark('大气监测@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/大气监测@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '大气监测@2x' ? 'selectButton' : ''">
                大气监测
              </div>
            </div>
            <div
              class="legend-body"
              @click="searchPark('水监测@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/水监测@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '水监测@2x' ? 'selectButton' : ''">
                水监测
              </div>
            </div>
            <div
              class="legend-body"
              @click="searchPark('应急物资@2x')"
            >
              <img
                class="legend-icon"
                src="@/assets/img/industry/zfParkOverviewDetailTwo/应急物资@2x.png"
                alt=""
                width="30px"
                height="30px"
              />
              <div class="legend-title" :class="selectLegend === '应急物资@2x' ? 'selectButton' : ''">
                应急物资
              </div>
            </div>
          </div>
        </div>
        <el-col class="box">
          <div class="title"><p>园区整体情况</p></div>
          <div class="content-body">
            <el-col :span="12">
              <div style="position: absolute;color:#00E4FF;font-size: 12px">此页面经济相关数据来源时间：{{dataTime}}年</div>
              <div class="leftTop">
                <div>-</div>
                <div>园区指数</div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-row type="flex" justify="space-around" class="rightTop">
                <el-col :span="11" class="rightTopBox">
                  <div>园区企业数</div>
                  <div>{{ integrity.entCount }}</div>
                </el-col>
                <el-col :span="11" class="rightTopBox">
                  <div>规上企业数</div>
                  <div>{{ integrity.standEntCount }}</div>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around" class="rightTop">
                <el-col :span="11" class="rightTopBox">
                  <div>营收(亿元)</div>
                  <div>{{ integrity.parkMainIncome }}</div>
                </el-col>
                <el-col :span="11" class="rightTopBox">
                  <div>税收(亿元)</div>
                  <div>{{ integrity.parkActualTax }}</div>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around" class="rightTop">
                <el-col :span="11" class="rightTopBox">
                  <div>占地面积(亩)</div>
                  <div>{{ integrity.parkArea }}</div>
                </el-col>
                <el-col :span="11" class="rightTopBox">
                  <div>从业人数</div>
                  <div>{{ integrity.parkPersonQty }}</div>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title"><p>亩均发展趋势</p></div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
              >
                营收
              </div>
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
              >
                税收
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
              >
                亩均税收
              </div>
              <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
              >
                亩均增加值
              </div>
            </div>
            <div id="development" style="width: 100%; height: 185px"></div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title"><p>园区企业名录</p></div>
          <div class="content-body">
            <div id="tableColor">
              <el-table
              ref="table"
                :data="tableData"
                style="width: 100%"
                height="200"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
                <el-table-column
                  property="isStandardsized"
                  :show-overflow-tooltip="true"
                  label="是否规上"
                  width="80"
                  align="center"
                ></el-table-column>
                <el-table-column
                  property="isHzEnterpeies"
                  :show-overflow-tooltip="true"
                  label="是否危化品企业"
                  width="130"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </div>
      <div
        class="content-center"
        style="width: 30%;position: absolute;right:15px;z-index: 100;margin-top: 10px"
      >
        <el-row>
          <el-col class="box">
            <div class="title"><p>园区产业分布</p></div>
            <div class="content-body">
              <div style="width: 50%; float: left;position: relative;">
                <div id="distribution" style="width: 100%; height: 180px;z-index:100"></div>
                <!-- <div class="legend">
                  <div
                    class="legendColor"
                    :style="{ 'background-color': legendColor2 }"
                  ></div>
                  <div>{{ legendValue2 }}</div>
                </div>
                <div class="aperture"></div> -->
              </div>

              <ul style="width: 50%; float: left" class="ulList">
                <li>
                  <div>主导产业</div>
                  <div>{{ industryName }}</div>
                </li>
                <li>
                  <div>主导产业企业数</div>
                  <div>{{ entCount }}</div>
                </li>
                <li>
                  <div>主导产业规上企业数</div>
                  <div>{{ standardEntCount }}</div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="box">
            <div class="title"><p>园区安全概览</p></div>
            <div class="content-body">
                <div style="width: 50%; float: left;position: relative;">
              <div id="workmanship1" style="width: 100%;height: 164px;z-index:100"></div>
              <!-- <div class="legend">
                <div class="legendColor" :style="{'background-color':legendColor3}"></div>
                <div>{{legendValue3}}</div>
              </div>
              <div class="aperture aperture1"></div> -->
            </div>
            <div style="width: 50%; float: left;position: relative;">
              <div id="source1" style="width: 100%;height: 164px;z-index:100"></div>
              <!-- <div class="legend">
                <div class="legendColor" :style="{'background-color':legendColor4}"></div>
                <div>{{legendValue4}}</div>
              </div>
              <div class="aperture aperture1"></div> -->
            </div>
            <div style="color:#52CCFF;font-weight:600;margin: 10px 0 5px">&nbsp;&nbsp;| 危化品</div>
              <el-row class="securityBottom">
                <el-col :span="8">
                  <div>危化品企业数</div>
                  <div>{{ dangerChemicalsEntCount }}</div>
                </el-col>
                <el-col :span="8">
                  <div>危化品车辆</div>
                  <div>{{ carCount }}</div>
                </el-col>
                <el-col :span="8">
                  <div>危化品种类</div>
                  <div>{{ chemicalTypeCount }}</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-col class="box box1">
              <div class="title title1"><p>园区环保概览</p></div>
              <div
                class="content-body"
                style="margin-top: 5px; height: 210px"
              >
                <ul>
                  <li
                    class="overview"
                    v-for="(item, index) in overviewArr"
                    :key="index"
                  >
                    <img src="../../../../assets/img/industry/废水监测.png" height="100%" alt="" />
                    <span style="margin-left: 10px">{{
                      item.monitoringTypeName
                    }}</span>
                    <span style="float: right;margin-right: 10px"
                      >
                      <span>{{ item.monitoringCount }}个</span>
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col class="box box1">
              <div class="title title1"><p>园区能源概览</p></div>
              <div class="content-body">
                <div id="survey1" style="width: 100%; height: 200px"></div>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </div>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
Vue.use(BaiduMap, {
  ak: 'vZi9dnlQaFQ3LYO8yOdeHjaGjwGWGHy4'
})
export default {
  name: 'zfParkOverviewDetail',
  components: { govheader, govnavigation },
  data () {
    return {
      parkName: '',
      parkCode: '',
      year: '',
      title: '',
      integrity: {
        parkIndex: '', // 园区指数
        entCount: '', // 园区企业数
        standEntCount: '', // 规上企业数
        parkMainIncome: '', // 营收
        parkActualTax: '', // 税收
        parkArea: '', // 占地面积
        parkPersonQty: '' // 从业人数
      },
      colorList: [
        'rgb(5,148,239)',
        'rgb(5,119,234)',
        'rgb(101,206,153)',
        'rgb(243,242,134)',
        'rgb(255,203,91)',
        'rgb(183,74,237)'
      ],
      colorList11: [
        'rgba(5,148,239,.5)',
        'rgba(5,119,234,.5)',
        'rgba(101,206,153,.5)',
        'rgba(243,242,134,.5)',
        'rgba(255,203,91,.5)',
        'rgba(183,74,237,.5)'
      ],
      colorList1: [
        'rgb(109,104,255)',
        'rgb(0,239,254)',
        'rgb(68,215,182)',
        'rgb(255,166,0)',
        'rgb(152,123,255)',
        'rgb(118,190,204)'
      ],
      colorList2: [
        'rgb(4,32,245)',
        'rgb(0,96,255)',
        'rgb(109,212,0)',
        'rgb(254,219,101)',
        'rgb(163,10,235)',
        'rgb(0,135,146)'
      ],
      optionData2: [],
      optionData3: [],
      optionData4: [],
      jiankuohao: '<',
      eagleEyeUrl: '',
      industryName: '',
      entCount: '',
      standardEntCount: '',
      parkProductsDistribution: [],
      dangerChemicalsEntCount: '',
      carCount: '',
      chemicalTypeCount: '',
      tableData: [],
      overviewArr: [],
      active: 0,
      dataTime: '2020',
      myChart1: '',
      option1: '',
      xAxisData1: [],
      optionData1: [],
      myChart2: '',
      option2: '',
      myChart3: '',
      option3: '',
      myChart4: '',
      option4: '',
      myChart5: '',
      option5: '',
      center: { lng: 119.501611, lat: 29.483372 },
      selectLegend: 'enterprise',
      enterpriseList: [],
      monitorList: [],
      eagleEyeList: [],
      airMonitoringList: [],
      waterMonitoringList: [],
      emergencySuppliesList: [],
      map: '',
      zoom: 12,
      legendColor2: '',
      legendValue2: '',
      legendColor3: '',
      legendValue3: '',
      legendColor4: '',
      legendValue4: '',
      optionData2Total: 0,
      angle3: 0,
      angle4: 0
    }
  },
  created () {
    this.parkName = this.$route.query.parkName
    this.parkCode = this.$route.query.parkCode
    this.year = this.$route.query.year
    this.center.lng = this.$route.query.longitude
    this.center.lat = this.$route.query.latitude
  },
  mounted () {
    this.getDevelopment()
    this.getSurvey()
    this.getright_table()
    this.$nextTick(() => {
      this.$http
        .post(`/home/government/govParkOverview/getParkOverviewDetail`, {
          searchDate: this.year,
          parkName: this.parkName,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          this.title = res.data.title
          this.integrity = res.data.integrity
          this.incomeList = res.data.perMuDevelopment.incomeList
          this.taxList = res.data.perMuDevelopment.taxList
          this.perMuTaxList = res.data.perMuDevelopment.perMuTaxList
          this.perMuAddList = res.data.perMuDevelopment.perMuAddList
          this.option1.xAxis[0].data = res.data.perMuDevelopment.yearList
          this.option1.series[0].data = this.incomeList
          this.tableData = res.data.parkEntDirectories.map((item) => {
            return {
              entName: item.entName,
              isStandardsized: item.isStandardsized ? '是' : '否',
              isHzEnterpeies: item.isHzEnterpeies ? '是' : '否'
            }
          })
          this.industryName = res.data.parkProductsDistribution[0].industryName
          this.entCount = res.data.parkProductsDistribution[0].entCount
          this.standardEntCount = res.data.parkProductsDistribution[0].standardEntCount
          let num = 0
          res.data.parkProductsDistribution.forEach((item, index) => {
            this.optionData2Total += Number(item.entCount)
            if (num === this.colorList1.length) {
              num = 0
            }
            this.optionData2.push({
              name: item.industryName,
              value: Number(item.entCount) * 10,
              itemStyle: {
                color: this.colorList[num],
                color1: this.colorList11[num]
              }
            })
            num++
          })
          let num1 = 0
          res.data.parkSafe.dangerChemicalTech.forEach((item, index) => {
            if (num1 === this.colorList1.length) {
              num1 = 0
            }
            this.optionData3.push({
              name: item.technologyTypeName,
              value: Number(item.technologyCount) * 10,
              itemStyle: {
                color: this.colorList1[num1],
                color1: this.colorList2[num1]
              }
            })
            num1++
          })
          let num2 = 0
          res.data.parkSafe.dangerSource.forEach((item, index) => {
            if (num2 === this.colorList1.length) {
              num2 = 0
            }
            this.optionData4.push({
              name: item.dataSourceLevel,
              value: Number(item.dataSourceCount) * 10,
              itemStyle: {
                color: this.colorList1[num2],
                color1: this.colorList2[num2]
              }
            })
            num2++
          })
          this.dangerChemicalsEntCount =
            res.data.parkSafe.dangerChemicalsEntCount
          this.carCount = res.data.parkSafe.carCount
          this.chemicalTypeCount = res.data.parkSafe.chemicalTypeCount
          this.overviewArr = res.data.parkEnvironment
          this.option5.xAxis[0].data = res.data.parkEnergy.xList
          this.option5.series[0].data = res.data.parkEnergy.y1List

          this.enterpriseList = res.data.monitorMap.ent
          this.monitorList = res.data.monitorMap.monitor
          this.eagleEyeList = res.data.monitorMap.eagleEye
          this.airMonitoringList = res.data.monitorMap.atmosphereMonitor
          this.waterMonitoringList = res.data.monitorMap.waterMonitor
          this.emergencySuppliesList = res.data.monitorMap.emergencySupplies
          this.searchPark('企业@2x')

          this.myChart1.setOption(this.option1)
          this.myChart5.setOption(this.option5)
          this.$nextTick(() => {
            this.getDistribution()
            this.getWorkmanship()
            this.getSource()
          })
        })
        .catch(() => {})
    })
  },
  beforeDestroy () {
    let _this = this
    clearInterval(_this.intervalId)
    clearInterval(_this.timer2)
    clearInterval(_this.timer3)
    clearInterval(_this.timer4)
  },
  methods: {
    getright_table () {
      let _this = this
      var isScroll = true
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // let height = document.getElementsByClassName('el-table__body-wrapper')[0].childNodes[0]
      // console.log(height);
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'statistics-warning-row'
      } else {
        return ''
      }
    },
    activeClick (val) {
      this.active = val
      if (val === 0) {
        this.option1.yAxis.name = '亿元'
        this.option1.series[0].data = this.incomeList
        this.option1.series[0].itemStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(2, 198, 255, 1)' },
            { offset: 1, color: 'rgba(2, 198, 255, 0)' }
          ])
      } else if (val === 1) {
        this.option1.yAxis.name = '亿元'
        this.option1.series[0].data = this.taxList
        this.option1.series[0].itemStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0,241,233, 1)' },
            { offset: 1, color: 'rgba(0,241,233, 0)' }
          ])
      } else if (val === 2) {
        this.option1.yAxis.name = '万元'
        this.option1.series[0].data = this.perMuTaxList
        this.option1.series[0].itemStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(174, 205, 81, 0.99)' },
            { offset: 1, color: 'rgba(2, 198, 255, 0)' }
          ])
      } else if (val === 3) {
        this.option1.yAxis.name = '万元'
        this.option1.series[0].data = this.perMuAddList
        this.option1.series[0].itemStyle.color =
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(220, 130, 68, 1)' },
            { offset: 1, color: 'rgba(180, 166, 143, 1)' }
          ])
      }
      this.myChart1.setOption(this.option1)
    },
    getDevelopment () {
      this.myChart1 = echarts.init(document.getElementById('development'))
      this.option1 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          top: '15%',
          left: '5%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '亿元',
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(2, 198, 255, 1)' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },
            data: []
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    getDistribution () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('distribution'))
      var data = []

      var seriesOption = [{
        type: 'pie',
        radius: [0, '80%'],
        label: {
          show: false,
          color: '#09F9D0',
          lineHeight: 24
          // formatter: e => {
          //     return `${e.name}\n销售量: ${e.data.value}人\n良品率: ${e.data.rate}%`
          // }
        },
        labelLine: {
          length: 20,
          lineStyle: {
            color: '#09F9D0'
          }
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#ffffff',
          // 阴影
          shadowColor: 'rgba(0, 0, 0, .2)',
          shadowBlur: 6,
          shadowOffsetY: 4
        },
        data: []
      }
      ]
      for (let i = 0; i < _this.optionData2.length; i++) {
        let json = {
          type: 'bar',
          name: _this.optionData2[i].name,
          max: 100, // 100 的比例
          data: [65], // 控制半径占比
          barWidth: (_this.optionData2[i].value / _this.optionData2Total) * 100 + '%', // 控制和饼图角度一致
          barGap: 0,
          itemStyle: {
            color: _this.optionData2[i].itemStyle.color,
            shadowColor: _this.optionData2[i].itemStyle.color,
            shadowBlur: 6
          },
          coordinateSystem: 'polar'
        }
        data.push(
          {
            value: _this.optionData2[i].value,
            rate: _this.optionData2[i].value,
            name: _this.optionData2[i].name,
            itemStyle: {
              color: _this.optionData2[i].itemStyle.color1
            }
          }
        )
        seriesOption.push(json)
      }
      seriesOption[0].data = data
      this.option2 = {
      // 背景颜色
      // backgroundColor: '#0D1223',
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.optionData2.length; i++) {
              total += _this.optionData2[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        angleAxis: {
          type: 'category',
          // 去掉边线
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          max: 100,
          // 去掉刻度线
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          radius: [0, '80%']
        },
        series: seriesOption
      }
      // this.option5 = this.getPie3D(_this.optionData5, 0, "", 30, 350);
      this.myChart2.setOption(_this.option2)
      this.autoPlay(_this.myChart2, _this.option2, 'timer2')
      // this.option2 = this.getPie3D(_this.optionData2, 0, "", 30, 350);
      // this.myChart2.setOption(_this.option2);
      // this.bindListen(_this.myChart2, _this.option2, "2", "timer2");
    },
    getWorkmanship () {
      let _this = this
      this.myChart3 = echarts.init(document.getElementById('workmanship1'))
      let angle = this.angle3 // 角度，用来做简单的动画效果的
      let value = 80
      var timerId
      var outerRidus1 = 0.8
      var outerRidus2 = 0.85
      var data = []
      var data1 = []

      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['75%', '55%'],
          center: ['50%', '60%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['65%', '40%'],
          center: ['50%', '60%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: () => {
              return '佣金总额\r\n{total|100} 个'
            },
            rich: {
              total: {
                fontSize: 24,
                color: '#FFFFFF'
              }
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]
      for (let i = 0; i < _this.optionData3.length; i++) {
        data.push(
          {
            value: _this.optionData3[i].value,
            name: _this.optionData3[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.optionData3[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.optionData3[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.optionData3[i].value,
          name: _this.optionData3[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.optionData3[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.optionData3[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
        // seriesOption.push(json)
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1

      this.option3 = {
        title: {
          text: '危险化工工艺',
          top: 0,
          left: 0,
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.optionData3.length; i++) {
              total += _this.optionData3[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.myChart3.setOption(this.option3, true)
      this.autoPlay(_this.myChart3, _this.option3, 'timer3')
      // this.option3 = this.getPie3D(_this.optionData3, 0.8,'丨危险化工工艺',30,250);
      // this.myChart3.setOption(_this.option3);
      // this.bindListen(_this.myChart3,_this.option3,'3','timer3');
    },
    getSource () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('source1'))
      let angle = this.angle4 // 角度，用来做简单的动画效果的
      let value = 80
      var timerId
      var outerRidus1 = 0.8
      var outerRidus2 = 0.85
      var data = []
      var data1 = []

      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['75%', '55%'],
          center: ['50%', '60%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['65%', '40%'],
          center: ['50%', '60%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: () => {
              return '佣金总额\r\n{total|100} 个'
            },
            rich: {
              total: {
                fontSize: 24,
                color: '#FFFFFF'
              }
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]
      for (let i = 0; i < _this.optionData4.length; i++) {
        data.push(
          {
            value: _this.optionData4[i].value,
            name: _this.optionData4[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.optionData4[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.optionData4[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.optionData4[i].value,
          name: _this.optionData4[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.optionData4[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.optionData4[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
        // seriesOption.push(json)
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1

      this.option4 = {
        title: {
          text: '危险源',
          top: 0,
          left: 0,
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.optionData4.length; i++) {
              total += _this.optionData4[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.myChart4.setOption(this.option4, true)
      this.autoPlay(_this.myChart4, _this.option4, 'timer4')
      // this.option4 = this.getPie3D(_this.optionData4, 0.8,'丨危险源',30,250);
      // this.myChart4.setOption(_this.option4);
      // this.bindListen(_this.myChart4,_this.option4,'4','timer4');
    },
    getSurvey () {
      this.myChart5 = echarts.init(document.getElementById('survey1'))
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        legend: {
          top: 0,
          right: 0,
          textStyle: {
            // 图例文字的样式
            color: '#fff'
          }
        },
        grid: {
          left: '1%',
          top: '20%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            data: [],
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '万吨标煤',
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            name: '总能耗',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(2, 198, 255, 1)' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },
            data: []
          }
        ]
      }
      this.myChart5.setOption(this.option5)
    },
    makeMark (iconName, list) {
      let map = this.map
      let icon = new BMap.Icon(
        require('@/assets/img/industry/zfParkOverviewDetailTwo/' + iconName + '.png'),
        new BMap.Size(30, 30),
        {
          imageSize: new BMap.Size(30, 30),
          imageOffset: new BMap.Size(0, 0)
        }
      )
      if (list && list.length > 0) {
        list.forEach((item) => {
          let point = new BMap.Point(item.longitude, item.latitude)
          let marker = new BMap.Marker(point, { icon: icon }) // 创建标注
          marker.setTitle(item.entName)
          map.addOverlay(marker) // 将标注添加到地图中
          window.map = map
        })
      } else {
        this.$message('暂无数据')
      }
    },
    // 搜索园区地图
    searchPark (val) {
      this.selectLegend = val
      if (this.map) {
        let map = this.map
        // 清空坐标
        map.clearOverlays()

        if (val === '企业@2x') {
          this.makeMark(val, this.enterpriseList)
        } else if (val === '监控@2x') {
          this.makeMark(val, this.monitorList)
        } else if (val === '鹰眼@2x') {
          if (this.eagleEyeList && this.eagleEyeList !== '') {
            window.open(this.eagleEyeList)
          } else {
            this.$message('暂无数据')
          }
        } else if (val === '大气监测@2x') {
          this.makeMark(val, this.airMonitoringList)
        } else if (val === '水监测@2x') {
          this.makeMark(val, this.waterMonitoringList)
        } else if (val === '应急物资@2x') {
          this.makeMark(val, this.emergencySuppliesList)
        } else {
          this.$message('暂无数据')
        }
      }
    },
    handler ({ BMap, map }) {
      this.map = map
      map.setMapType(BMAP_NORMAL_MAP) // BMAP_HYBRID_MAP
      map.setMapStyle({ style: 'midnight' })
    //   map.setMapStyle({
    //     styleJson: [
    //       {
    //         featureType: "poilabel",
    //         elementType: "labels",
    //         stylers: {
    //           visibility: "off",
    //         },
    //       },
    //       {
    //         featureType: "poilabel",
    //         elementType: "labels.icon",
    //         stylers: {
    //           visibility: "off",
    //         },
    //       },
    //       {
    //         featureType: "village",
    //         elementType: "labels",
    //         stylers: {
    //           visibility: "off",
    //         },
    //       },
    //       {
    //         featureType: "land",
    //         elementType: "geometry",
    //         stylers: {
    //           color: "#e7f7fcff",
    //         },
    //       },
    //       {
    //         featureType: "scenicspots",
    //         elementType: "geometry",
    //         stylers: {
    //           visibility: "off",
    //         },
    //       },
    //     ],
    //   });
    },
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    goback () {
      this.$router.push({ name: 'zfParkOverviewTwo' })
    },
    gozhihui () {
      window.open('http://10.33.60.49:9090/IIP-FRONT/entry')
    },
    // 饼状图自动播放
    autoPlay (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(timer)
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      timer = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: 0,
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value / 10}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },

    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },

    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },

    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },

    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      let seriesName = ''
      let dataIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(timer)
        flag = false
        seriesIndex = params.seriesIndex
        seriesName = params.seriesName
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {

          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] =
            option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          timer = setInterval(chartHover, 5000)
          flag = true
        }
      })
      timer = setInterval(chartHover, 5000)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background: #041565;
}
.box {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url("../../../../assets/img/industry/zfParkOverviewDetailTwo/数据框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.box1{
    background-image: url("../../../../assets/img/industry/zfParkOverviewDetailTwo/数据框2@2x.png");
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.title1{
  width: 220px;
}
.content {
  padding: 10px 0 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
    margin-top: 10px;
  }
  .content-body-right {
    width: 55%;
  }
}
.leftTop {
  width: 80%;
  height: 160px;
  margin: 0 auto;
  background-image: url("../../../../assets/img/industry/数据背景框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #e5fbff;
  text-align: center;
  font-weight: 600;
  > div:first-child {
    font-size: 28px;
    background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 50px;
  }
  > div:last-child {
    margin-top: 60px;
  }
}
.rightTop {
  width: 100%;
  margin-bottom: 10px;
  .rightTopBox {
    color: #ffffff;
    padding: 5px;
    text-align: center;
    background-image: url("../../../../assets/img/industry/数据背景框2.png");
    background-size: 100% 100%;
    > div {
      height: 20px;
      line-height: 20px;
    }
    > div:first-child {
      font-size: 12px;
    }
    > div:last-child {
      font-weight: 600;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.tabs {
  float: right !important;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #52ccff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
  }
}
.selectActive {
  // color: #00a3ff !important;
  font-weight: 600;
  color: #52ccff !important;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #000000;
  border-radius: 3px;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      font-size: 12px;
    }
  }
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
    }
  }
}
.content-body /deep/ .el-table th.is-leaf,
.content-body /deep/ .el-table td {
  border: 0;
}
.content-body /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.content-body-right /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  width: 12px;
  height: 10px;
  display: none;
}

//滚动条的滑块
.main ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 90, 255, 0.1);
  border-radius: 5px;
}
/deep/ .BMap_cpyCtrl {
  display: none;
}
/deep/ .anchorBL {
  display: none;
}
.intrdouce {
  width: 144px;
  left: 480px;
  bottom: 5px;
  position: absolute;
  z-index: 10;
  background-image: url('../../../../assets/img/industry/zfParkOverviewDetailTwo/地图图例框@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 16px;
  color: #52CCFF;
  overflow: hidden;
  .legend-body {
    text-align: center;
    margin: 6px;
    height: 40px;
    padding: 10px 0px 10px 10px;
  }
  .legend-title {
    font-size: 15px;
    float: left;
    padding: 3px 10px;
    cursor: pointer;
  }
  .legend-icon {
    float: left;
    margin-right: 10px;
  }
}
.goback {
  position: absolute;
  z-index: 10;
  text-align: center;
  right: 10px;
  width: 135px;
  padding: 5px 10px;
  color: #ffffff;
  cursor: pointer;
  border-radius: 20px;
  background-color: #00a8ff;
  > span {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    // background-color: #1c4ca1;
    color: #ffffff;
    text-align: center;
    margin-right: 5px;
  }
}
.content-center {
  .left_baidu {
    position: relative;
    // background: #ffffff;
    // border: 1px solid #f0f0f0;
    // box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    height: 754px;
    margin: 0px auto;
  }
}
.ulList {
  li {
    width: 70%;
    margin: 0 auto;
    list-style: none;
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    color: #ffffff;
    background-image: url("../../../../assets/img/industry/zfParkOverviewDetailTwo/产业框@2x.png");
    background-size: 100% 100%;
    > div {
      height: 20px;
      line-height: 20px;
    }
    > div:first-child {
      font-size: 12px;
    }
    > div:last-child {
      font-weight: 600;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.securityBottom {
  width: 100%;
//   border-radius: 5px;
  > div {
    margin: 0 auto;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 12px;
    > div {
      float: left;
      text-align: center;
      height: 25px;
      line-height: 25px;
    }
    > div:last-child {
      margin-left: 10px;
      font-size: 18px;
      font-weight: 600;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.overview {
  height: 50px;
  line-height: 50px;
  & > span {
    color: #ffffff;
    &:nth-of-type(2) {
      width: 50px;
      height: 40px;
      margin-top: 10px;
      line-height: 20px;
      text-align: center;

      background: url("../../../../assets/img/industry/数据展示框3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      & > span {
        color: transparent;
        background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 12px;
      }
    }
  }
}
.legend{
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #A1E2FF;
  text-align: center;
  overflow: hidden;
  >div{
    float: left;
  }
}
.legendColor{
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2){
  width:170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture{
  position: absolute;
  top: 34%;
  left: 50%;
  margin-left: -29%;
  width: 58%;
  height: 82px;
  background-image: url('../../../../assets/img/industry/aperture.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aperture1{
  margin-left: -26%;
  width: 52%;
}
.selectButton{
  font-weight: 600;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #00B4FF;
  border-radius: 3px;
}
</style>
